{% extends "announcements/announcements.html" %}

{% block page_link %}

{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .add_background {
            background: #A9A9A9;
        }
        .top_tag {
            border-bottom: #01AAED solid 2px;color: #01AAED;
        }

        .tab_top {
            width: 80px;height: 40px;line-height: 40px;text-align: left;display: inline-block;cursor: pointer;padding-left: 1%;
        }

        .shadow_tab{
            box-shadow: #01AAED 0 0 10px;
        }
        .shadow_tab_1{
            width: 30%;height: 80px;border: #cfcfcf solid 1px;margin: 1%;display: inline-block;vertical-align: top;cursor: pointer;
        }

        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        #Table td{
            text-align: center;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            height: 40px;
            border: #cccccc solid 1px;
        }
        #Table tr:hover{
            background: #D8D8D8;
            color: white;
        }
        #Table2 td{
            text-align: center;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            height: 40px;
            border: #cccccc solid 1px;
        }
        #Table2 tr:hover{
            background: #D8D8D8;
            color: white;
        }
        #Table3 td{
            text-align: center;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            height: 40px;
            border: #cccccc solid 1px;
        }
        #Table3 tr:hover{
            background: #D8D8D8;
            color: white;
        }
        #Table1 td{
            text-align: center;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            height: 40px;
            border: #cccccc solid 1px;
        }
        #Table1 tr:hover{
            background: #D8D8D8;
            color: white;
        }
        #content table {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        #content table td,
        #content table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }

        #content table th {
            border-bottom: 2px solid #ccc;
            text-align: center;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 100%;height: 40px;background: white;border-bottom: #A9A9A9 solid 0.5px;">
        <div id="notice_detail" onclick="change_mind('notice_detail')" class="tab_top top_tag">
            公告详情
        </div>
        <div id="examine_detail" onclick="change_mind('examine_detail')" class="tab_top">
            审批详情
        </div>
        <div id="reception_detail" onclick="change_mind('reception_detail')" class="tab_top">
            接收详情
        </div>
    </div>

    <div id="notice_detail_tab" style="width: 100%;height: 94%;">
        <div style="width: 100%;height: 100%;background-color: white;">
            <div style="width: 100%;height: 40px;line-height: 40px;text-align: center;"><h3 id="notice_title"></h3></div>
            <div style="width: 100%;height: 40px;line-height: 40px;text-align: center;"><span id="company"></span> <span style="margin-left: 2%;" id="create_people"></span></div>
            <div style="width: 100%;height: 40px;line-height: 40px;text-align: center;" id="creat_time"></div>
            <hr>
            <div style="width: 100%;height: 85%;">
                <div style="width: 100%;height: 80%;overflow: auto;padding: 13%;padding-top: 2%;" id="content">
                </div>
                <hr>
                <div id="accessory" style="padding-left: 3%;font-size: 16px;height: 20%;overflow: auto;"></div>
            </div>

        </div>
    </div>

    <div id="examine_detail_tab" style="width: 100%;height: 94%;display: none;">
        <div style="width: 100%;height: 95%;overflow: auto;">
            <table style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                <thead>
                    <tr style="background-color: #F5F5F5;">
                        <th style="width: 10%;border: #cccccc solid 1px;border-top: none;">审批人</th>
                        <th style="width: 10%;border: #cccccc solid 1px;border-left: none;border-top: none;">状态</th>
                        <th style="width: 20%;border: #cccccc solid 1px;border-left: none;border-top: none;">审批时间</th>
                        <th style="width: 20%;border: #cccccc solid 1px;border-left: none;border-top: none;">审批意见</th>
                        <th style="width: 20%;border: #cccccc solid 1px;border-left: none;border-top: none;">签名</th>
                    </tr>
                </thead>
                <tbody style="overflow: auto;" id="Table1">

                </tbody>
            </table>
        </div>
    </div>

    <div id="reception_tab" style="width: 100%;height: 94%;display: none;background-color: white;">
        <div style="width: 100%;height: 100px;">
            <div id="tab_1" class="shadow_tab_1" onclick="Change_tab(1)">
                <div style="width: 80px;padding-left: 10%;display: inline-block;vertical-align: top;margin-top: 15px;">
                    <img src="../../static/administrative/img/1人员管理.png" alt="" style="width: 50px;height: 50px;">
                </div>
                <div style="padding-left: 5%;display: inline-block;margin-top: 15px;vertical-align: top;">
                    <div style="height: 25px;">
                        <h5 style="color: #01AAED;" id="auto_num"></h5>
                    </div>
                    <div style="height: 25px;">收阅人次</div>
                </div>
            </div>

            <div id="tab_2" class="shadow_tab_1" onclick="Change_tab(2)">
                <div style="width: 80px;padding-left: 10%;display: inline-block;vertical-align: top;margin-top: 15px;">
                    <img src="../../static/administrative/img/查看.png" alt="" style="width: 50px;height: 50px;">
                </div>
                <div style="padding-left: 5%;display: inline-block;margin-top: 15px;vertical-align: top;">
                    <div style="height: 25px;">
                        <h5 style="color: #00b7ee;" id="have_see"></h5>
                    </div>
                    <div style="height: 25px;">已查看</div>
                </div>
            </div>

            <div id="tab_3" class="shadow_tab_1" onclick="Change_tab(3)">
                <div style="width: 80px;padding-left: 10%;display: inline-block;vertical-align: top;margin-top: 15px;">
                    <img src="../../static/administrative/img/未查看.png" alt="" style="width: 50px;height: 50px;">
                </div>
                <div style="padding-left: 5%;display: inline-block;margin-top: 15px;vertical-align: top;">
                    <div style="height: 25px;">
                        <h5 style="color: #e02107;" id="unread_see"></h5>
                    </div>
                    <div style="height: 25px;">未查看</div>
                </div>
            </div>
        </div>

        <div style="width: 100%;height: 80%;">
            <div id="tab_one" style="width: 100%;height: 100%;overflow: auto;">
                <table style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                    <thead>
                        <tr style="background-color: #F5F5F5;">
                            <th style="width: 10%;border: #cccccc solid 1px;">接收人</th>
                            <th style="width: 10%;border: #cccccc solid 1px;border-left: none;">状态</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">查看时间</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">签名</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="Table">

                    </tbody>
                </table>
            </div>
            <div id="tab_two" style="width: 100%;height: 100%;display: none;overflow: auto;">
                <table style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                    <thead>
                        <tr style="background-color: #F5F5F5;">
                            <th style="width: 10%;border: #cccccc solid 1px;">接收人</th>
                            <th style="width: 10%;border: #cccccc solid 1px;border-left: none;">状态</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">查看时间</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">签名</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="Table2">
                    </tbody>
                </table>
            </div>
            <div id="tab_three" style="width: 100%;height: 100%;display: none;overflow: auto;">
                <table style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                    <thead>
                        <tr style="background-color: #F5F5F5;">
                            <th style="width: 10%;border: #cccccc solid 1px;">接收人</th>
                            <th style="width: 10%;border: #cccccc solid 1px;border-left: none;">状态</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">查看时间</th>
                            <th style="width: 20%;border: #cccccc solid 1px;border-left: none;">签名</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="Table3">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

{% endblock %}


{% block script %}
    <script>
        window.onload = function () {
            var all_flag = "{{ all_flag | safe }}";
            if (all_flag){
                document.getElementById("Announcement-management").className = "add_class";
            }else {
                document.getElementById("Announcement-economy").className = "add_class";
            }
            document.getElementById("inform").className = "add-nav-active";
            request_data()
        };
        function request_data() {       // type_s: 1、全部查询，2、查询我的申请，3、查询我的审批
            var present_id = window.location.href.split("id=")[1].replace("#", '');
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/announcements/notice_detail");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("id="+present_id);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate)
                        if(JsonDate["return_dic"]["type"] === 'pc'){
                            var decode = atob(JsonDate["return_dic"]["content"]);
                            var content = decodeURI(decode);
                        }
                        else {
                            var content = JsonDate["return_dic"]["content"]
                        }
                        document.getElementById("notice_title").innerText=JsonDate["return_dic"]["title"];
                        document.getElementById("company").innerText=JsonDate["return_dic"]["create_people_company"];
                        document.getElementById("create_people").innerText=JsonDate["return_dic"]["create_people"];
                        document.getElementById("creat_time").innerText=JsonDate["return_dic"]["creat_time"];
                        document.getElementById("content").innerHTML=content;
                        crtete_reception(JsonDate["notice_people_list"]);
                        creat_examine(JsonDate["audit_people_list"]);
                        if (JsonDate["return_dic"]["adjunct"]) {
                            var adjunct = JsonDate["return_dic"]["adjunct"];
                            var accessory = document.getElementById("accessory");
                            for (var i=0;i<adjunct.length;i++){
                                var div_tag = document.createElement("div");
                                var div_tag_1 = document.createElement("div");
                                div_tag_1.style.fontSize = '14px';
                                div_tag_1.style.display = 'inline-block';
                                div_tag_1.style.verticalAlign = 'top';
                                if (adjunct[i]["file_path"].split(".").slice(-1)[0] === "doc" || adjunct[i]["file_path"].split(".").slice(-1)[0] === "docx") {
                                    div_tag_1.innerHTML = '<img src="../../static/correspondence/img/word%20(3).png" alt="" style="width: 50px;height: 50px;">';
                                } else if (adjunct[i]["file_path"].split(".").slice(-1)[0] === "pdf" || adjunct[i]["file_path"].split(".").slice(-1)[0] === "PDF") {
                                    div_tag_1.innerHTML = '<img src="../../static/correspondence/img/pdf.png" alt="" style="width: 50px;height: 50px;">';
                                } else if (adjunct[i]["file_path"].split(".").slice(-1)[0] === "xls" || adjunct[i]["file_path"].split(".").slice(-1)[0] === "xlsx") {
                                    div_tag_1.innerHTML = '<img src="../../static/correspondence/img/Excel写入-选中.png" alt="" style="width: 50px;height: 50px;">'
                                } else {
                                    div_tag_1.innerHTML = '<img src="../../static/correspondence/img/PNG%20(1).png" alt="" style="width: 50px;height: 50px;">'
                                }

                                var div_tag_2 = document.createElement("div");
                                div_tag_2.style.fontSize = '0';
                                div_tag_2.style.display = 'inline-block';
                                div_tag_2.style.verticalAlign = 'top';
                                div_tag_2.style.marginLeft = '10px';
                                var div_tag_3 = document.createElement("div");
                                if (adjunct[i].hasOwnProperty("pdf_path")) {
                                    div_tag_3.innerHTML = "<a style='font-size: 14px;' target='_blank' href='" + adjunct[i]["pdf_path"] + "'>" + adjunct[i]["file_name"] + "</a>";
                                } else {
                                    div_tag_3.innerHTML = "<a style='font-size: 14px;' href='" + adjunct[i]["file_path"] + "'>" + adjunct[i]["file_name"] + "</a>";
                                }
                                var div_tag_4 = document.createElement("div");
                                div_tag_4.innerHTML = "<a style='font-size: 14px;color: #0000FF;' href='http://" + local_host + adjunct[i]["download_path"] + "'>下载附件</a>";
                                div_tag_2.appendChild(div_tag_3);
                                div_tag_2.appendChild(div_tag_4);
                                div_tag.appendChild(div_tag_1);
                                div_tag.appendChild(div_tag_2);
                                accessory.appendChild(div_tag);








                                {#var div = document.createElement("div");var span_tag = document.createElement("span");var a_tag = document.createElement("a");#}
                                {#span_tag.innerHTML="附件"+String(i+1)+"：";a_tag.innerText = adjunct[i]["file_name"];div.style.color="black";a_tag.target='_blank';#}
                                {#if (adjunct[i].hasOwnProperty("pdf_path")){#}
                                {#    a_tag.href=adjunct[i]["pdf_path"];#}
                                {# }else {#}
                                {#    a_tag.href=adjunct[i]["file_path"];#}
                                {# }#}

                                {#div.appendChild(span_tag);div.appendChild(a_tag);#}
                                accessory.appendChild(div);
                            }
                        }
                    }
                }
            };
        }

        function crtete_reception(json_data) {
            var Table = document.getElementById("Table");
            var Table2 = document.getElementById("Table2");
            var Table3 = document.getElementById("Table3");
            document.getElementById("auto_num").innerText=String(json_data.length) + " 人";
            var Have_to_see = [];
            var unread = [];
            for (var i=0;i<json_data.length;i++){
                var tr = document.createElement("tr");
                var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");
                td.innerHTML=json_data[i]["name"];td1.innerHTML=json_data[i]["state"];td2.innerHTML=json_data[i]["accepted_time"];
                if (!json_data[i]["signature_picture"]){
                    td3.innerHTML="";
                }else {
                    td3.innerHTML="<img style='width: 100px;height: 40px' src='"+json_data[i]["signature_picture"]+"'>";
                }
                tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);Table.appendChild(tr);
                if (json_data[i]["state"] === "未读") {
                    unread.push(json_data[i]);
                }else {
                    Have_to_see.push(json_data[i])
                }
            }
            document.getElementById("have_see").innerText=String(Have_to_see.length) + " 人";
            document.getElementById("unread_see").innerText=String(unread.length) + " 人";

            for (var j=0;j<Have_to_see.length;j++){
                var tr1 = document.createElement("tr");
                var td_1 = document.createElement("td");var td_2 = document.createElement("td");var td_3 = document.createElement("td");var td_4 = document.createElement("td");
                td_1.innerHTML=Have_to_see[j]["name"];td_2.innerHTML=Have_to_see[j]["state"];td_3.innerHTML=Have_to_see[j]["accepted_time"];
                if (!Have_to_see[j]["signature_picture"]){
                    td_4.innerHTML="";
                }else {
                    td_4.innerHTML="<img style='width: 100px;height: 40px' src='"+Have_to_see[j]["signature_picture"]+"'>";
                }
                tr1.appendChild(td_1);tr1.appendChild(td_2);tr1.appendChild(td_3);tr1.appendChild(td_4);Table2.appendChild(tr1);
            }

            for (var k=0;k<unread.length;k++){
                var tr2 = document.createElement("tr");
                var td__1 = document.createElement("td");var td__2 = document.createElement("td");var td__3 = document.createElement("td");var td__4 = document.createElement("td");
                td__1.innerHTML=unread[k]["name"];td__2.innerHTML=unread[k]["state"];td__3.innerHTML=unread[k]["accepted_time"];
                if (!unread[k]["signature_picture"]){
                    td__4.innerHTML="";
                }else {
                    td__4.innerHTML="<img style='width: 100px;height: 40px' src='"+unread[k]["signature_picture"]+"'>";
                }
                tr2.appendChild(td__1);tr2.appendChild(td__2);tr2.appendChild(td__3);tr2.appendChild(td__4);Table3.appendChild(tr2);
            }
        }

        function creat_examine(json_data) {
            console.log("json_data: ", json_data)
            var Table1 = document.getElementById("Table1");
            for (var g=0;g<json_data.length;g++){
                var tr = document.createElement("tr");
                var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");
                td.innerHTML=json_data[g]["name"];td1.innerHTML=json_data[g]["state"];td2.innerHTML=json_data[g]["accepted_time"];td3.innerHTML=json_data[g]["audit_note"];
                if (!json_data[g]["signature_picture"]){
                    td4.innerHTML="";
                }else {
                    td4.innerHTML="<img style='width: 100px;height: 40px' src='/media/"+json_data[g]["signature_picture"]+"'>";
                }

                tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);Table1.appendChild(tr);
            }
        }

        function change_mind(ele_id) {
            if (ele_id === "notice_detail") {
                document.getElementById("notice_detail_tab").style.display = "inline-block";
                document.getElementById("examine_detail_tab").style.display = "none";
                document.getElementById("reception_tab").style.display = "none";
                document.getElementById("notice_detail").className = "tab_top top_tag";
                document.getElementById("examine_detail").className = "tab_top";
                document.getElementById("reception_detail").className = "tab_top";
            }else if (ele_id === "examine_detail"){
                document.getElementById("examine_detail_tab").style.display = "inline-block";
                document.getElementById("notice_detail_tab").style.display = "none";
                document.getElementById("reception_tab").style.display = "none";
                document.getElementById("notice_detail").className = "tab_top";
                document.getElementById("examine_detail").className = "tab_top top_tag";
                document.getElementById("reception_detail").className = "tab_top";
            }else {
                document.getElementById("reception_tab").style.display = "inline-block";
                document.getElementById("notice_detail_tab").style.display = "none";
                document.getElementById("examine_detail_tab").style.display = "none";
                document.getElementById("notice_detail").className = "tab_top";
                document.getElementById("examine_detail").className = "tab_top";
                document.getElementById("reception_detail").className = "tab_top top_tag";
            }
        }

        function Change_tab(change_number) {
             if (change_number === 1){
                 document.getElementById("tab_1").className = "shadow_tab shadow_tab_1";
                 document.getElementById("tab_2").className = "shadow_tab_1";
                 document.getElementById("tab_3").className = "shadow_tab_1";
                 document.getElementById("tab_one").style.display = "inline-block";
                 document.getElementById("tab_two").style.display = "none";
                 document.getElementById("tab_three").style.display = "none";
             }else if (change_number === 2){
                 document.getElementById("tab_1").className = "shadow_tab_1";
                 document.getElementById("tab_2").className = "shadow_tab shadow_tab_1";
                 document.getElementById("tab_3").className = "shadow_tab_1";
                 document.getElementById("tab_two").style.display = "inline-block";
                 document.getElementById("tab_one").style.display = "none";
                 document.getElementById("tab_three").style.display = "none";
             }else {
                 document.getElementById("tab_1").className = "shadow_tab_1";
                 document.getElementById("tab_2").className = "shadow_tab_1";
                 document.getElementById("tab_3").className = "shadow_tab shadow_tab_1";
                 document.getElementById("tab_two").style.display = "none";
                 document.getElementById("tab_one").style.display = "none";
                 document.getElementById("tab_three").style.display = "inline-block";
             }
         }

        function permissions_validation(a_href, permissions_type) {
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/system-setup/permissions_validation");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("permissions_type=通知公告");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        var permissions_flag = false;

                        for(var key in JsonDate["permissions"]){
                            if (JsonDate["permissions"][key]){
                                permissions_flag = true;
                                break
                            }
                        }
                        if (permissions_flag){
                            window.location.href=a_href;
                        }
                        if (!permissions_flag){
                            alert("您的访问权限不足！")
                        }
                    }
                }
             };
        }
    </script>
{% endblock %}
